<template>
    <div class="home-container">
      <el-card class="card">
        <h1>首页 ({{ counterStore.count }})</h1>
        <el-button type="primary" @click="counterStore.increment">
          点击计数 <el-icon><plus /></el-icon>
        </el-button>
        <p>这是一个基于 Vue3 + Vite + Element Plus 的实战项目</p>
        <el-divider />
        <p>当前路由：{{ $route.path }}</p>
      </el-card>
    </div>
  </template>
  
  <script setup lang="ts">
  import { useRoute } from 'vue-router'
  import { useCounterStore } from '../store/counter'
  import { Plus } from '@element-plus/icons-vue'
  
  const $route = useRoute()
  const counterStore = useCounterStore()
  </script>
  
  <style scoped lang="css">
  .home-container {
    padding: 20px;
    min-height: 80vh;
  }
  
  .card {
    padding: 30px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  }
  </style>  